<template>
  <div id="container"></div>
</template>

<script>
//这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
//例如： import 《组件名称》 from '《组件路径》 ';

import AMapLoader from "@amap/amap-jsapi-loader";
import { reqStoreGPSList } from '@/api/report'
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '57a18aafb55064088272e9831ab8aa35',
}
export default {
  name: 'PositionContainer',
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
  },
  data() {
    //这里存放数据
    return {
      AMap: null,
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      map: null,
      mouseTool: null,
      marker: null,
      allowCollision: false,//标注避让marker
      markers: [],
      layer: null,
      LabelsData: [],
      center: [113.658405, 34.741777],
    };
  },
  created() {
    this.newestPositions()
  },
  mounted() {
    this.initMap();
  },
  //方法集合
  methods: {
    async newestPositions() {
      reqStoreGPSList().then(res => {
        if (res.code == 200) {
          var postions = res.data
          console.log(res.data)
          // return 
          this.LabelsData = res.data.map(item => {
            var labelsData = {
              name: item.name,
              position: [Number(item.longitude), Number(item.latitude)],
              zooms: [10, 20],
              opacity: 1,
              zIndex: 11.5,
              fold: true,
              icon: {
                // 图标类型，现阶段只支持 image 类型
                type: 'image',
                // 图片 url
                image: '/storeIcon.png',
                // 图片尺寸
                size: [30, 30],
                // 图片相对 position 的锚点，默认为 bottom-center
                anchor: 'center',
              },
              text: {
                // 要展示的文字内容
                content: item.name,
                // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                direction: 'top',
                // 在 direction 基础上的偏移量
                offset: [0, -5],
                // 文字样式
                style: {
                  // 字体大小
                  fontSize: 16,
                  // 字体颜色
                  fillColor: 'red',
                  strokeColor: '#fff',
                  strokeWidth: 2,
                  fold: false,
                  padding: '2, 5',
                }
              }
            }
            return labelsData
          })
          this.center = [postions[0].longitude, postions[0].latitude]
          this.initMap()
        }
      })
    },
    initMarkers(AMap) {
      this.layer = new AMap.LabelsLayer({
        zooms: [3, 20],
        zIndex: 1000,
        // collision: false,
        // 设置 allowCollision：true，可以让标注避让用户的标注
        allowCollision: this.allowCollision,
      });
      this.layer.add(this.markers);
      // 图层添加到地图
      this.map.add(this.layer);

      // 初始化 labelMarker
      for (var i = 0; i < this.LabelsData.length; i++) {
        var curData = this.LabelsData[i];
        curData.extData = {
          index: i
        };

        var labelMarker = new AMap.LabelMarker(curData);

        this.markers.push(labelMarker);
        // this.marker.on('click', (e) => {
        //   this.setInfoWindows(e, item)
        // })

      }
      // 将 marker 添加到图层
      this.layer.add(this.markers);

      this.map.setFitView(null, false, [100, 150, 10, 10]);
      labelMarker.on('click', (e) => {
        this.setInfoWindows(e, item)
      })
      // this.toggleBtn()
    },
    initMap() {
      AMapLoader.load({
        key: "7ce880f2976149e9e8f24e51b0c34084",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": [
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.ToolBar",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.ControlBar",
          "AMap.MouseTool",
          "AMap.DragRoute",
          "AMap.MoveAnimation"],         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.AMap = AMap
        this.map = new AMap.Map("container", {  //设置地图容器id
          zoom: 15.8,   // 初始化地图级别
          center: this.center, //中心点坐标  成都 104.065735, 30.659462
          showIndoorMap: false,
        });

        this.initMarkers(AMap);


      }).catch(e => {
        console.log(e);
      })
    },
    //显示的弹出框组件
    setInfoWindows(e, item) {
      console.log(item)
      // 信息窗体的内容
      let content = [
        // e.pos[0],e.pos[1],
        `<div style='\'padding:0px' 0px = '' 4px; \'=''><b>${item.name}</b>`,
        `联系人 ：${item.storeUser ? item.storeUser : '无'}，电话 ：${item.storePhone ? item.storePhone : '无'}`,
        `设备 ：在线${item.onLine}台，离线：${item.offline}台，故障：${item.fault}台`,
        `地址 : ${item.address}</div></div>`,
        // `<img src=${item.img} alt="" style="width: 100px;height: 100px">`
      ];
      // 创建 infoWindow 实例	
      let infoWindow = new AMap.InfoWindow({
        content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
      });
      // 打开信息窗体
      let dd = this.map.getCenter()
      // dd.pos = [e.pos[0], e.pos[1]]
      dd.lat = item.latitude
      dd.lng = item.longitude
      console.log(dd)
      infoWindow.open(this.map, dd);
    },
    //点击获取经纬度
    latitude() {
      this.map.on('click', function (ev) {
        // console.log(ev)
        // 触发事件的对象
        let target = ev.target;
        // 触发事件的地理坐标，AMap.LngLat 类型
        let lnglat = ev.lnglat;
        // 触发事件的像素坐标，AMap.Pixel 类型
        let pixel = ev.pixel;
        // 触发事件类型
        let type = ev.type;
        console.log(target, lnglat, pixel, type)
      });
    },
  },

}
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}

.input-item {
  height: 2.2rem;
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: .25rem;
  width: 10rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: fixed;
  bottom: 12rem;
  right: 2rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}
</style>

